<template>
    <div class='' id="main" style="width: 100%;height: 100%;">

    </div>
</template>
<script>


import * as echarts from 'echarts'

export default {
    data() {
        return {
            chart: null,
            xAxisText: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子', '外套'],
            yAxisData: [5, 20, 36, 10, 15, 25, 35]
        };
    },
    mounted() {
        this.chart = echarts.init(document.getElementById('main'));
        this.drawShape() // 绘制图形
    },
    methods: {
        drawShape() {
            // 创建立方体正面图形
            const cubeShape1 = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                    width: 80, // 长方体宽度
                    zWidth: 4, // 阴影折角高
                    zHeight: 2 // 阴影折角宽
                },
                buildPath: (ctx, shape) => {
                    const api = shape.api;
                    const xAxisPoint = api.coord([shape.xValue, 0]);
                    const p0 = [shape.x, shape.y];
                    const p1 = [shape.x - shape.width / this.xAxisText.length, shape.y];
                    const p4 = [shape.x + shape.width / this.xAxisText.length, shape.y];
                    const p2 = [xAxisPoint[0] - shape.width / this.xAxisText.length, xAxisPoint[1]];
                    const p3 = [xAxisPoint[0] + shape.width / this.xAxisText.length, xAxisPoint[1]];

                    // 绘制正面
                    ctx.moveTo(p0[0], p0[1]); //0
                    ctx.lineTo(p1[0], p1[1]); //1
                    ctx.lineTo(p2[0], p2[1]); //2
                    ctx.lineTo(p3[0], p3[1]); //3
                    ctx.lineTo(p4[0], p4[1]); //4
                    ctx.lineTo(p0[0], p0[1]); //0
                    ctx.closePath();
                }
            })

            // 创建立方体的顶和侧面
            const cubeShape2 = echarts.graphic.extendShape({
                shape: {
                    x: 0,
                    y: 0,
                    width: 80,
                    zWidth: 4,
                    zHeight: 2
                },
                buildPath: (ctx, shape) => {
                    const api = shape.api;
                    const xAxisPoint = api.coord([shape.xValue, 0]);
                    const p1 = [shape.x - shape.width / this.xAxisText.length, shape.y];
                    const p4 = [shape.x + shape.width / this.xAxisText.length, shape.y];
                    const p6 = [shape.x + shape.width / this.xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
                    const p7 = [shape.x - shape.width / this.xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
                    const p3 = [xAxisPoint[0] + shape.width / this.xAxisText.length, xAxisPoint[1]];
                    const p5 = [xAxisPoint[0] + shape.width / this.xAxisText.length + shape.zWidth, xAxisPoint[1] - shape.zHeight];

                    // 绘制侧面
                    ctx.moveTo(p4[0], p4[1]); //4
                    ctx.lineTo(p3[0], p3[1]); //3
                    ctx.lineTo(p5[0] + 6, p5[1] - 6); //5
                    ctx.lineTo(p6[0] + 7, p6[1] - 8); //6
                    ctx.lineTo(p4[0], p4[1]); //4

                    // 绘制顶部
                    ctx.moveTo(p4[0], p4[1]); //4
                    ctx.lineTo(p6[0] + 7, p6[1] - 8); //6
                    ctx.lineTo(p7[0] + 7, p7[1] - 8); //7
                    ctx.lineTo(p1[0], p1[1]); //1
                    ctx.lineTo(p4[0], p4[1]); //4
                    ctx.closePath();
                }
            })

            echarts.graphic.registerShape('cubeShape1', cubeShape1)
            echarts.graphic.registerShape('cubeShape2', cubeShape2)
            this.initECharts()
        },
        initECharts() {
            const option = {
                title: {
                    text: '主要指标',
                    left: 20,
                    top: 20,
                    textStyle: {
                        color: "#fff",
                        fontWeight: 'normal',
                        fontSize: "16",
                    }
                },
                xAxis: {
                    type: 'category',
                    data: this.xAxisText,
                    interval: 0,
                    axisLabel: {
                        color: '#333'
                    }
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '销量统计',
                    type: 'custom',
                    barSize: 3,
                    barWidth: 30,
                    renderItem: (params, api) => {
                        let location = api.coord([api.value(0), api.value(1)])
                        return {
                            type: 'group',
                            children: [{
                                type: 'cubeShape1', // 正方体正面
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1]
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0.4,
                                        color: 'rgba(80, 165, 249, 1)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(72, 255, 255, 1)'
                                    }])
                                }
                            }, {
                                type: 'cubeShape2', // 正方体侧面和顶
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1]
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0.3,
                                        color: 'rgba(74, 151, 226, 1)'
                                    }, {
                                        offset: 1,
                                        color: 'rgba(72, 255, 255, 1)'
                                    }])
                                }
                            }]
                        }
                    },
                    data: this.yAxisData
                }]
            }
            this.chart.setOption(option)
        }
    },
}
</script>


<!-- <script>
import { color } from 'echarts';
export default {
    name: '',
    components: {},
    data() {
        return {
        }
    },
    created() { },
    mounted() {
        var chartDom = document.getElementById('main');
        var myChart = this.$echarts.init(chartDom);
        var option;
        // prettier-ignore
        let dataAxis = ['周一', '周二', '周三', '周三', '周五', '周六', '周日'];
        // prettier-ignore
        let data = [220, 182, 191, 234, 290, 330, 310];
        let yMax = 500;
        let dataShadow = [];
        for (let i = 0; i < data.length; i++) {
            dataShadow.push(yMax);
        }
        option = {
            title: {
                text: '主要指标',
                color: "#fff",
                left: "50",
                top: "10",
                textStyle: {
                    color: "#fff",
                    fontWeight: 'normal',
                    fontSize: "16"
                }
            },
            xAxis: {
                data: dataAxis,
                axisLabel: {
                    // inside: true,
                    color: '#fff'
                },
                axisTick: {
                    show: false,
                },
                // axisLine: {
                //     show: false
                // },
                // z: 10
            },
            yAxis: {
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    color: '#999'
                }
            },
            dataZoom: [
                {
                    type: 'inside'
                }
            ],
            series: [
                {
                    type: 'bar',
                    showBackground: true,
                    barWidth: 30,  //柱状图柱子宽度
                    itemStyle: {
                        color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#83bff6' },
                            { offset: 0.5, color: '#188df0' },
                            { offset: 1, color: '#188df0' }
                        ])
                    },
                    emphasis: {
                        itemStyle: {
                            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#2378f7' },
                                { offset: 0.7, color: '#2378f7' },
                                { offset: 1, color: '#83bff6' }
                            ])
                        }
                    },
                    data: data
                }
            ]
        };
        // Enable data zoom when user click bar.
        // const zoomSize = 6;
        // myChart.on('click', function (params) {
        //     console.log(dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)]);
        //     myChart.dispatchAction({
        //         type: 'dataZoom',
        //         startValue: dataAxis[Math.max(params.dataIndex - zoomSize / 2, 0)],
        //         endValue:
        //             dataAxis[Math.min(params.dataIndex + zoomSize / 2, data.length - 1)]
        //     });
        // });

        option && myChart.setOption(option);

    },
    methods: {

    }
}
</script> -->



<style scoped lang='scss'>
* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}
</style>
